import React, { useState, useEffect } from 'react'
import { StyleSheet, Text, View, StatusBar, FlatList, ImageBackground, TouchableWithoutFeedback } from 'react-native'

import Icon from 'react-native-vector-icons/MaterialIcons';
import Avatar from '../../../components/avatar/Avatar'

// 当前是否正在加载中
let loading = false;

const City = ({ navigation }) => {
  // 当用户一打开这个页面，就执行获取所在城市并设置标题
  useEffect(() => {
    // 先获取用户所在的城市
    let city = '上海'
    // 把名称设置为标题
    navigation.setOptions({
      title: city
    })
  }, [navigation])

  // 模拟数据
  const [data, setdata] = useState([1, 2, 3, 4])

  // 是否显示刷新的图标
  const [refreshing, setrefreshing] = useState(false)

  return (
    <View>
      <StatusBar barStyle="light-content" />
      <FlatList
        numColumns={2} // 设置列数据。
        data={data}
        renderItem={({ item, index }) => <VideoItems navigation={navigation} />}
        keyExtractor={(item, index) => index.toString()}
        refreshing={refreshing} // 布尔，是否显示加载的图标。
        onRefresh={() => {      // 函数，当下拉时会触发函数。
          // 显示刷新图标
          setrefreshing(true)
          // 调用接口获取最新的数据 (暂时模拟)
          setTimeout(() => {
            // 更新数据
            setdata([1, 2, 5, 6, 7, 8, 9])
            // 更新完之后隐藏刷新图标
            setrefreshing(false)
          }, 2000)
        }}
        ListFooterComponent={ // 组件，列表最底部显示的加载图标。
          <Text
            style={{
              height: 50,
              textAlign: 'center',
              textAlignVertical: 'center',
            }}
          >
            加载中...
          </Text>
        }
        onEndReachedThreshold={
          // 数值，距离底部的百分比，比如：0.2，含义当滚动到距离底部20%的时候触发加载更多
          0.2
        }
        onEndReached={ // 函数，当滚动到底部时触发的函数。
          () => {
            // 如果当前正在加载中，那么就直接退出，不需要再加载
            if (loading) {
              return
            }
            // 标记一下，当前正在加载
            loading = true
            // 调用接口加载更多数据
            setTimeout(() => {
              // 调用接口获取数据，把数据追回到数据的后面
              setdata([...data, ...[5, 6, 7, 8, 9]])
              // 标记为加载完，可以进行下次加载了
              loading = false
            }, 2000)
          }
        }
      />
    </View>
  )
}

// 每条记录的样式
function VideoItems({ navigation }) {
  return (
    <View style={styles.VideoItems}>
      {/* 背景图 */}
      <TouchableWithoutFeedback
        onPress={() => {
          // 跳转到详情页
          navigation.navigate('City-Detail', { id: 13 })
        }}
      >
        <ImageBackground
          style={{
            height: 300
          }}
          source={{
            uri: 'https://img11.360buyimg.com/pop/s1180x940_jfs/t1/111007/11/3838/70315/5eaa83d5E0c967a7a/94ecaf7387f6736c.jpg.webp'
          }}
        >
          <View style={styles.VideoBox}>
            <View style={{ flexDirection: 'row' }}>
              <Icon name="add-location" color="white" size={20} />
              <Text style={{ color: 'white' }}>0.5km</Text>
            </View>
          </View>
          <View style={styles.VideoAvatar}>
            <Avatar uri='https://img2.woyaogexing.com/2020/05/08/8f4f6158e1864f71a86b303eda8cd416!400x400.jpeg' />
          </View>
        </ImageBackground>
      </TouchableWithoutFeedback>
      {/* 标题 */}
      <Text>专注高保真交互原型设计，喜欢研究各种体验友好的交互效果</Text>
    </View>
  )
}

export default City

const styles = StyleSheet.create({
  VideoItems: {
    flex: 1,
    borderWidth: 3
  },
  VideoBox: {
    position: 'absolute',
    left: 10,
    bottom: 10
  },
  VideoAvatar: {
    position: 'absolute',
    right: 10,
    bottom: 10
  }
})
